<template>
  <div>
    <div id="compare" ref="compare" class="box lineboxcomp" />
  </div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
import { AjaxToken } from "@/api/common";
export default {
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      myChart: null,
      list: [],
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    var box = document.getElementById("compare");
    const erd = elementResizeDetectorMaker();
    const that = this;
    erd.listenTo(document.getElementById("compare"), function (element) {
      that.$nextTick(function () {
        // 使echarts尺寸重置

        that.myChart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.compare);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",

        target: document.querySelector(".lineboxcomp"),
      });
      backstage.GetCpnMonyAndErpChart(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetCpnMonyAndErpChart: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetCpnMonyAndErpChart",
        params,
        "post",
        function (res) {
          loading.close();
          var datas = {
            直连类: {
              name: "直连类",
              visualMap: false,
              value: 30,
              soName: [],
              soValue: [
                {
                  value: 21,
                  name: "直连类1",
                  seriesData: [
                    17, -3, 2, 42, -28, 27, 15, -12, -27, 22, -6, 10,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 22,
                  name: "直连类5",
                  seriesData: [27, -13, 12, 12, -18, 17, 5, -2, -7, 32, -6, 1],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 23,
                  name: "直连类9",
                  seriesData: [
                    7, -23, 42, 22, -18, 37, 25, -2, -17, 42, -16, 20,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 25,
                  name: "直连类4",
                  seriesData: [11, -7, -14, 20, 33, -9, 27, 39, -1, -3, 0, 26],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 31,
                  name: "直连类7",
                  seriesData: [
                    22, 27, 10, 35, 31, 7, -11, 22, -12, -1, -16, 16,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#648afa",
                  },
                },
              ],
              lineData: {
                undefined: {
                  seriesData: [
                    22, 27, 10, 35, 31, 7, -11, 22, -12, -1, -16, 16,
                  ],
                },
              },
            },
            非直连类: {
              name: "非直连类",
              visualMap: false,
              value: 30,
              soName: [],
              soValue: [
                {
                  value: 18,
                  seriesData: [27, -13, 12, 12, -18, 17, 5, -2, -7, 32, -6, 1],
                  name: "非直连类7",
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 19,
                  seriesData: [
                    17, -3, 2, 42, -28, 27, 15, -12, -27, 22, -6, 10,
                  ],
                  name: "非直连类12",
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 19,
                  seriesData: [
                    7, -23, 42, 22, -18, 37, 25, -2, -17, 42, -16, 20,
                  ],
                  name: "非直连类1",
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 20,
                  seriesData: [11, -7, -14, 20, 33, -9, 27, 39, -1, -3, 0, 26],
                  name: "非直连类6",
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 21,
                  seriesData: [
                    22, 27, 10, 35, 31, 7, -11, 22, -12, -1, -16, 16,
                  ],
                  name: "非直连类13",
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
              ],
              lineData: {
                undefined: {
                  seriesData: [27, -13, 12, 12, -18, 17, 5, -2, -7, 32, -6, 1],
                },
              },
            },
            其他: {
              name: "其他",
              visualMap: false,
              value: 30,
              soName: [],
              soValue: [
                {
                  value: 28,
                  name: "其他13",
                  seriesData: [27, -13, 12, 12, -18, 17, 5, -2, -7, 32, -6, 1],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 28,
                  name: "其他12",
                  seriesData: [
                    17, -3, 2, 42, -28, 27, 15, -12, -27, 22, -6, 10,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#85f585",
                  },
                },
                {
                  value: 30,
                  name: "其他7",
                  seriesData: [
                    7, -23, 42, 22, -18, 37, 25, -2, -17, 42, -16, 20,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#648afa",
                  },
                },
                {
                  value: 31,
                  name: "其他17",
                  seriesData: [11, -7, -14, 20, 33, -9, 27, 39, -1, -3, 0, 26],
                  visualMap: false,
                  itemStyle: {
                    color: "#648afa",
                  },
                },
                {
                  value: 31,
                  name: "其他1",
                  seriesData: [
                    22, 27, 10, 35, 31, 7, -11, 22, -12, -1, -16, 16,
                  ],
                  visualMap: false,
                  itemStyle: {
                    color: "#648afa",
                  },
                },
              ],
              lineData: {
                undefined: {
                  seriesData: [11, -7, -14, 20, 33, -9, 27, 39, -1, -3, 0, 26],
                },
              },
            },
          };
        
          function setCurOption(barName, lineName, index) {
            return {
              title: [
                {
                  text: "三方支付总额分类",
                  x: "25%",
                  y: "3%",
                  textAlign: "center",
                  textBaseline: "middle",
                  textStyle: {
                    fontSize: 20,
                  },
                },
                {
                  text: barName,
                  x: "75%",
                  y: "2%",
                  textAlign: "center",
                  textBaseline: "middle",
                  textStyle: {
                    fontSize: 20,
                  },
                },
                {
                  text: lineName,
                  x: "45%",
                  y: "43%",
                  textAlign: "center",
                  textBaseline: "middle",
                  textStyle: {
                    fontSize: 20,
                  },
                },
              ],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: [
                {
                  data: ["直连类", "非直连类", "其他"],
                  x: "left",
                  orient: "vertical",
                },
              ],
              grid: [
                {
                  left: "48%",
                  right: "5%",
                  top: "5%",
                  bottom: "65%",
                  containLabel: true,
                },
                {
                  gridindex: 1,
                  left: "0%",
                  right: "5%",
                  top: "50%",
                  bottom: "5%",
                  containLabel: true,
                },
              ],
              visualMap: {
                show: false,
                pieces: [
                  {
                    lte: -10,
                    color: "#ffff00",
                  },
                  {
                    gt: -10,
                    lt: 30,
                    color: "#85f585",
                  },
                  {
                    gte: 30,
                    lt: 35,
                    color: "#648afa",
                  },
                  {
                    gte: 35,
                    color: "#ffff00",
                  },
                ],
              },
              xAxis: [
                {
                  type: "value",
                  boundaryGap: [0, 0.01],
                },
                {
                  gridIndex: 1,
                  type: "category",
                  boundaryGap: false,
                  data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月",
                  ],
                },
              ],
              yAxis: [
                {
                  type: "category",
                  data: name,
                  axisLabel: {
                    interval: 0,
                  },
                },
                {
                  gridIndex: 1,
                  type: "value",
                },
              ],
              series: [
                {
                  name: "数量",
                  type: "pie",
                  center: ["25%", "18%"],
                  radius: ["15%", "20%"],
                  label: {
                    normal: {
                      formatter: "{b} :{c} ({d}%)",
                    },
                  },
                  data: [datas["直连类"], datas["非直连类"], datas["其他"]],
                },
                {
                  name: "top10",
                  type: "bar",
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      color: "#00cfff",
                    },
                  },
                  data: datas[barName].soValue,
                },
                {
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  name: lineName,
                  type: "line",
                  data: lineSeries[index],
                  markPoint: {
                    data: [
                      {
                        type: "max",
                        name: "最大值",
                        symbolSize: 55,
                      },
                      {
                        type: "min",
                        name: "最小值",
                        symbolSize: 50,
                      },
                    ],
                  },
                  markLine: {
                    data: [
                      {
                        type: "average",
                        name: "平均值",
                      },
                    ],
                  },
                },
              ],
            };
          }

          var selName = "非直连类";

          //  折线图的标题
          var lineName = datas[selName].soValue[0].name;
          // 折线图的数据
          var lineSeries = [];
          datas[selName].soValue.forEach((item) => {
            lineSeries.push(item.seriesData);
          });

          //  柱状图每个数据的名字

          var name = [];
          datas[selName].soValue.forEach((item) => {
            name.push(item.name);
          });
          // 折线图数据下标
          var index = 0;
          var option = setCurOption(selName, lineName, index);

          thisobj.myChart.on("click", function (params) {
            if (params.seriesType === "pie") {
              selName = params.name;
              lineName = datas[selName].soValue[0].name;
              name = [];
              datas[selName].soValue.forEach((item) => {
                name.push(item.name);
              });

              thisobj.myChart.clear();
              var option = setCurOption(selName, lineName, index);
              thisobj.myChart.setOption(option);
            }

            if (params.seriesType === "bar") {
              console.log(params.dataIndex);
              index = params.dataIndex;

              console.log(lineSeries[params.dataIndex]);

              thisobj.myChart.setOption(
                setCurOption(selName, params.name, index)
              );
            }
          });

          thisobj.myChart.setOption(option);

          window.addEventListener("resize", () => {
            thisobj.myChart.resize();
          });
        },
        function (err) {}
      );
    }, 1 * 1000);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 1000px;
}
</style>


